<template>
    <div class="person">
        <h1>个人信息:</h1>
        <h1>姓:<input type="text" v-model="firstName"></h1>
        <h1>名:<input type="text" v-model="lastName"></h1>
        <h1>全名:{{fullName}}</h1>
        <button @click="changeFullName">将全名修改为li-si</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref ,computed} from 'vue';
          //数据
          let firstName=ref('zhang')
          let lastName=ref('san')
          let fullName=computed({
        get(){return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value},
            set(val){
                const [str1,str2]=val.split('-')
                firstName.value=str1
                lastName.value=str2
                console.log('set',val)
            }
          }
          
        )

          function changeFullName(){
            fullName.value="li-si"
          }
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>